<template>
	<view class="container">
		<view class="bg"></view>
		<view class="back" @click="back">
			<image src="../../static/assets/back2.png" mode=""></image>
		</view>
		<!-- 头像 -->
		<view class="touxiang">
			<image src="../../static/assets/person.png" mode=""></image>
		</view>
		<!-- tab -->
		<view class="tab">
			<block v-for="(item,index) in tablist" v-bind:key='item.id'>
				<view :class="['tabitem',{'active':current==index}]" @click="addclick(index)">{{item.text}}</view>
			</block>
		</view>
		<!-- 内容部分 -->
		<view class="contentbox">
			<!-- 收藏房源 -->
			<view class="collectlist" v-if="showCollect">
				<block v-for="(item,index) in getCollect" v-bind:key="item.house_id">
					<navigator :url="'../houseDetail/houseDetail?id='+encodeURIComponent(item.id)" class="collectitem">
						<text class="delete" @click="addDelete(index)">x</text>
						<image :src="item.house_main_image" mode=""></image>
						<text>{{item.hire_way}} {{item.sub_name}}</text>
					</navigator>
				</block>
			</view>
			<!-- 预约列表 -->
			<view class="appointment" v-if="showBook">
				<block v-for="(item,index) in getAppoint" v-bind:key="item.id">
					<view class="item">
						<view class="pic">
							<image :src="item.house_main_image" mode=""></image>
						</view>
						<view class="content">
							<text class="place">{{item.hire_way}}-{{item.sub_name}}</text>
							<text class="time">{{item.booktime}}</text>
							<text class="delete" @click="addDelete2(index)">Cancel</text>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:[
					{text:'收藏房源',id:0},
					{text:'预约列表',id:1}
				],
				current:0,
				showCollect:true,
				showBook:false,
				getCollect:[],//获取收藏列表
				getAppoint:[]//获取预约列表
			}
		},
		methods: {
			back(){
				this.$router.back(-2)
			},
			// 切换tab选项卡
			addclick(index){
				this.current=index;
				if(this.current==0){
					this.showCollect=true;
					this.showBook=false;
					this.getdata();
				}
				else{
					this.showCollect=false;
					this.showBook=true;
					// 获取本地预约数据
					uni.getStorage({
						key:'set_appointList',
						success: (res) => {
							console.log(res.data);
							this.getAppoint=res.data;
							console.log(this.getAppoint);
						},
						fail: (err) => {
							let datalist2=err.data;
							if(datalist2.length==0){
								uni.showToast({
									icon:"error",
									title:"暂无预约数据"
								})
							}
						}
					})
				}
			},
			// 获取本地收藏数据
			getdata(){
				uni.getStorage({
					key:'set_collectlist',
					success: (res) => {
						console.log(res.data);
						let data=res.data;
						if(data.length==0){
							uni.showToast({
								icon:"error",
								title:"暂无收藏数据"
							})
						}
						else{
							this.getCollect=data;
						}
					},
					fail: (err) => {
						let datalist=err.data;
						if(datalist.length==0){
							uni.showToast({
								icon:"error",
								title:"暂无收藏数据"
							})
						}
					}
				});
				
				
			},
			//删除收藏
			addDelete(index){
				this.getCollect.splice(index,1);
				uni.setStorage({
					key:'set_collectlist',
					data:this.getCollect,
					success:function() {
						console.log('删除收藏成功');
						uni.showToast({
							title:'删除收藏成功',
							icon:"none",
							duration:1000,
							mask:true
						})
					}
				})
			},
			addDelete2(index){
				this.getAppoint.splice(index,1);
				uni.setStorage({
					key:'set_appointList',
					data:this.getAppoint,
					success:function(){
						uni.showToast({
							title:'取消预约成功',
							icon:"none",
							duration:1000,
							mask:true
						})
						console.log('取消预约成功');
					}
				})
			}
			
		},
		onLoad() {
			
		},
		onShow() {
			uni.getStorage({
				key:'set_logined',
				success:(res)=>{
					// console.log(res.data);
					// this.getdata();
					this.current=0;
					// if(res.data==null){
					// 	uni.navigateTo({
					// 		url:"../login/login"
					// 	})
					// }
				},
				fail: (err) => {
					// console.log(err);
					if(err){
						uni.navigateTo({
							url:"../login/login"
						})
					}
				}
			})
		},
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	height: 100%;
	padding-top: 20%;
	.bg{
		width:100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-image: url(../../static/assets/bg.jpg);
		background-position:left center; 
		background-size: cover;
		opacity: 0.3;
		z-index: -1;
	}
	.back{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.touxiang{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		background-color: #585eaa;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.tab{
		width: 90%;
		margin: 0 auto;
		margin-top: 60rpx;
		display: flex;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		.tabitem{
			width: 50%;
			padding: 1rem 0 ;
			font-size: 1.2rem;
			text-align: center;
			background-color: #FFFFFF;
			color:#555555;
		}
		.active{
			background-color: #585eaa;
			color: #FFFFFF;
		}
	}
	.contentbox{
		width: 90%;
		margin: 0 auto;
		height: 750rpx;
		background-color: #FFFFFF;
		overflow: scroll;
		.collectlist{
			width: 90%;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			// justify-content: space-around;
			margin-left: 5%;
			flex-wrap: wrap;
			.collectitem{
				width: 45%;
				margin-left: 2%;
				display: flex;
				flex-direction:column;
				border: 1px solid #Dddddd;
				border-radius: 20rpx;
				margin-bottom: 10rpx;
				position: relative;
				image{
					width: 100%;
					height: 270rpx;
				}
				text{
					display: block;
					width: 90%;
					padding: 0.5rem 0.4rem;
				}
				.delete{
					display: block;
					width:20rpx;
					height: 20rpx;
					text-align: center;
					line-height: 20rpx;
					position: absolute;
					top: 8rpx;
					right: 10rpx;
					background-color: #FFFFFF;
					color: #555555;
					z-index: 2;
				}
			}
		}
		.appointment{
			width: 90%;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			.item{
				width: 90%;
				display: flex;
				border-bottom: 1px solid #Dddddd;
				margin-bottom: 10rpx;
				.pic{
					width: 150rpx;
					height: 150rpx;
					border-radius: 15rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.content{
					width: 70%;
					height: 150rpx;
					margin-left: 10rpx;
					position: relative;
					text{
						display: block;
						width: 90%;
						padding: 0.5rem 0.4rem;
					}
					.delete{
						display: block;
						background-color: #eeeeee;
						width: 100rpx;
						height: 30rpx;
						text-align: center;
						line-height: 30rpx;
						position: absolute;
						bottom: 10rpx;
						right: 10rpx;
					}
				}
			}
		}
		&::-webkit-scrollbar{
			width: 0;
			height: 0;
			opacity: 0;
		}
	}
	
}
</style>
